<template>
  <div class="dashboard-card" :style="{ background: gradient }">
    <div class="card-title">{{ title }}</div>
    <div class="card-value">{{ value }}</div>
  </div>
</template>

<script setup>
// eslint-disable-next-line no-unused-vars
const props = defineProps({
  title: String,
  value: [String, Number],
  gradient: String, // 卡片背景渐变
})
</script>

<style scoped>
.dashboard-card {
  padding: 20px;
  border-radius: 8px;
  color: white;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-title {
  font-size: 14px;
  margin-bottom: 10px;
}
.card-value {
  font-size: 24px;
  font-weight: bold;
}
</style>
